import React, {Component} from 'react'
import {Select, Input, Icon} from 'antd';
const Option = Select.Option;
const InputGroup = Input.Group;

export default class NumPicker extends Component {
    constructor(props) {
        super(props);
        const value = this.props.value || {min: '', max: '', exc: '', eq: ''};
        this.state = {
            optionList: [],
            currency: value || {},
            flag: 'single',
        };
    }

    handleCurrencyChange = (value) => {
        if (!('value' in this.props)) {
            this.setState({currency: value});
        }
        this.triggerChange(value);
    };
    triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        let confirmValue = {};
        if (this.state.flag == 'single') {
            confirmValue = {
                eq: changedValue.eq
            };
        }
        if (this.state.flag == 'noSingle') {
            confirmValue = {
                min: changedValue.min,
                max: changedValue.max,
                exc: changedValue.exc
            };
        }
        if (onChange) {
            onChange(confirmValue);
        }
    };
    handleMRPClick = () => {
        if (this.state.flag == 'single') {
            this.setState({
                flag: 'noSingle',
                currency: {
                    min: '',
                    max: '',
                    exc: '',
                    eq: '',
                }
            })
        }
        if (this.state.flag == 'noSingle') {
            this.setState({
                flag: 'single',
                currency: {
                    min: '',
                    max: '',
                    exc: '',
                    eq: '',
                }
            })
        }
        this.handleCurrencyChange({min: '', max: '', exc: '', eq: ''})
    };
    onMinChange = (e) => {
        const value = e.target.value;
        this.handleChangeValueToCurrencyChange(value, 'min')
    };
    onMaxChange = (e) => {
        const value = e.target.value;
        this.handleChangeValueToCurrencyChange(value, 'max')
    };
    onExcChange = (e) => {
        const value = e.target.value;
        this.handleChangeValueToCurrencyChange(value, 'exc')
    };
    onEqChange = (e) => {
        const value = e.target.value;
        this.handleChangeValueToCurrencyChange(value, 'eq')
    };
    //工厂函数
    handleChangeValueToCurrencyChange = (value, con) => {
        let currency = this.state.currency;
        currency[con] = value;
        this.handleCurrencyChange(currency)
    };


    render() {
        let optionList = this.state.optionList;
        const dicCode = this.props.dicCode;
        const dicName = this.props.dicName;
        const state = this.state;
        let tempNode;
        if (this.state.flag == 'noSingle') {
            // tempNode = <InputGroup compact>
            //     <Input value={this.state.currency.min} onChange={this.onMinChange}
            //            //style={{width: '20%', textAlign: 'center'}} placeholder="Min"/>
            //            style={{width: '20%', textAlign: 'center'}} placeholder="最小"/>
            //     <Input style={{width: '10%', borderLeft: 0, pointerEvents: 'none'}} placeholder="~"/>
            //     <Input value={this.state.currency.max} onChange={this.onMaxChange}
            //            //style={{width: '20%', textAlign: 'center', borderLeft: 0}} placeholder="Max"/>
            //            style={{width: '20%', textAlign: 'center', borderLeft: 0}} placeholder="最大"/>
            //     <Input style={{width: '20%', borderLeft: 0, pointerEvents: 'none'}} placeholder="刨除"/>
            //     <Input value={this.state.currency.exc} onChange={this.onExcChange}
            //            style={{width: '20%', textAlign: 'center', borderLeft: 0,}} placeholder=""/>
            //     <Icon onClick={this.handleMRPClick} type="swap" style={{
            //         display: 'inline-block',
            //         height: '28px',
            //         paddingTop: '8px',
            //         backgroundColor: '#eee',
            //         width: '10%',
            //         cursor: 'pointer'
            //     }}/>
            // </InputGroup>
            tempNode = <InputGroup compact >
            {/* <Input value={this.state.currency.min} onChange={this.onMinChange} style={{ width: '20%', textAlign: 'center' }} placeholder="Min" /> */}
            <Input value={this.state.currency.min} onChange={this.onMinChange} style={{ width: '24%', textAlign: 'center' }} placeholder="最小" />
            <Input style={{ width: '11%', borderLeft: 0, pointerEvents: 'none' }} placeholder="~" />
            {/* <Input value={this.state.currency.max} onChange={this.onMaxChange} style={{ width: '20%', textAlign: 'center', borderLeft: 0 }} placeholder="Max" /> */}
            <Input value={this.state.currency.max} onChange={this.onMaxChange} style={{ width: '24%', textAlign: 'center', borderLeft: 0 }} placeholder="最大" />
            {/* <Input style={{ width: '22%', borderLeft: 0, pointerEvents: 'none' }} placeholder="刨除" /> */}
            <Input style={{ width: '9%', borderLeft: 0, pointerEvents: 'none' }} placeholder="|" />
            <Input value={this.state.currency.exc} onChange={this.onExcChange} style={{ width: '24%', textAlign: 'center', borderLeft: 0, }} placeholder="刨除" />
            <Icon onClick={this.handleMRPClick} type="swap" style={{display:'inline-block',height:'28px',paddingTop:'8px',backgroundColor:'#eee',width: '8%',cursor:'pointer'}} />
        </InputGroup>
        } else {
            tempNode = <InputGroup compact>
                <Input value={this.state.currency.eq} onChange={this.onEqChange} style={{width: '90%'}}/>
                <Icon onClick={this.handleMRPClick} type="swap" style={{
                    display: 'inline-block',
                    height: '28px',
                    paddingTop: '8px',
                    backgroundColor: '#eee',
                    width: '10%',
                    cursor: 'pointer'
                }}/>
            </InputGroup>
        }
        return (
            <div className='noTransition' style={{transition: 'none'}}>
                {tempNode}
            </div>
        );
    }
}
